document.onclick = function(e){
	e.preventDefault();
	if(e.target !== document.getElementById('myinput')){
		hidePageAlert();
	}
}
function hideInputSug(e, key, vaule){
	//隐藏提示框
  //document.getElementById(e).style[key] = vaule;
  addEvent(e, click, function(){
  	document.getElementById(e).style[key] = vaule;
  })
}


//外观模式
function addEvent(dom, type, fn){
	//对于支持 DOM2 级事件处理程序 addEventListener 方法的浏览器
	if(dom.addEventListener){
		dom.addEventListener(type, fn, false);
		//对于不支持 addEventListener 方法但支持 attachEvent 方法的浏览器
	}else if(dom.attachEvent){
		dom.attachEvent('on' + type, fn);
		//对于不支持 addEventListener 方法也不支持 attachEvent方法， 但支持 on + '事件名'的浏览器
	}else{
		dom['on' + type] = fn;
	}
}

var myInput = document.getElementById('myinput');
addEvent(myInput, 'click', function(){
	console.log("绑定第一个事件")
})
addEvent(myInput, 'click', function(){
	console.log("绑定第二个事件")
})
addEvent(myInput, 'click', function(){
	console.log("绑定第三个事件")
})

function hideInputSug(key, vaule){
	//隐藏提示框
  myInput.style[key] = vaule;
  
}

//获取事件对象
var getEvent = function(event){
	//标准浏览器返回event, IE下window.event
	return event || window.event;
}
//获取元素
var getTarget  = function(event){
	var event = getEvent(event);
	//标准浏览器下event.target, IE下event.srcElement
	return event.target || event.srcElement;
}
//阻止默认行为
var preventDefault = function(event){
	var event = getEvent(event);
	//标准浏览器
	if(event.preventDefault){
		event.preventDefault();
		//IE浏览器
	}else{
		event.returnValue = false;
	}
}

document.onclick = function(e){
	//阻止默认行为
	preventDefault(e);
	//获取事件源目标对象
	if(getTarget(e) == document.getElementById('myinput')){
		hideInputSug('display', 'none');
	}else{
		hideInputSug('display', 'block');
	}
}

//小型代码库
//简约版属性样式方法库
var A = {
	//通过id获取元素
	g : function(id){
		return document.getElementById(id);
	},
	//设置元素CSS属性
	css : function(id, key, value){
		document.getElementById(id).style[key] = value;
	},
	//设置元素的元素
	attr : function(id, key, value){
		document.getElementById(id)[key] = value;
	},
	html : function(id, html){
		document.getElementById(id).innerHTML = html;
	},
	//为元素绑定事件
	on : function(id, type, fn){
		document.getElementById(id)['on' + type] = fn;
	}
};

A.css('box', 'background', 'red');
A.attr('box', 'className', 'box');
A.html('box', '这是新添加的内容');
A.on('box', 'click', function(){
	A.css('box', 'width', '500px');
});

console.log(A);